const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

const {
  override,
  addWebpackPlugin,
  addDecoratorsLegacy,
  addBabelPlugins,
  addLessLoader,
  addWebpackAlias,
  addWebpackModuleRule,
  overrideDevServer,
  watchAll,
  removeModuleScopePlugin
} = require('customize-cra')

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  webpack: override(
    removeModuleScopePlugin(),
    ...addBabelPlugins(
      'transform-jsx-classname-components',
      'transform-react-pug'
    ),
    addWebpackPlugin(new MonacoWebpackPlugin()),
    addDecoratorsLegacy(),
    addLessLoader(),
    addWebpackAlias({
      '@': resolve('src/'),
      components: resolve('src/components'),
      views: resolve('src/views'),
      '@infra-share': '/mnt/data0/work/infra-share/packages'
    }),
    addWebpackModuleRule({
      test: /\.customworker\.js$/,
      use: { loader: 'worker-loader' }
    })
  ),
  devServer: overrideDevServer(config => {
    config.headers = {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }

    return config
  })
}
